<template>
  <div class="content">
    <div class="editUserInfoTitle">
      编辑个人信息
    </div>
    <div class="split"></div>
    <div class="userInfo">
      <div style="float: left">
        <div>
          <div class="label">
            昵称：
          </div>
          <div class="inputClass">
            <Input
              :input-type="'text'"
              :input-style="inputType"
              :value="userInfo.nickname"
              :name="'nickname'"
              @inputChange="inputChange"
            />
          </div>
        </div>
        <div class="content-each">
          <div class="label">
            介绍：
          </div>
          <div class="inputClass">
            <Input
              :input-type="'text'"
              :placeholder="'介绍自己'"
              :input-style="inputType"
              :value="userInfo.selfhoodSign"
              :name="'selfhoodSign'"
              @inputChange="inputChange"
            />
          </div>
        </div>
        <div class="content-each">
          <div class="label">
            绑定手机：
          </div>
          <div style="position: absolute;opacity: 0;cursor:not-allowed;" class="inputClass"></div>
          <div class="inputClass">
            <Input
              :input-type="'phone'"
              :input-style="inputType"
              :value="userInfo.phone"
            />
          </div>
        </div>
        <div class="content-each">
          <div class="label">
            地区
          </div>
          <div style="display: inline-block">
            <select @change="provinceChange($event)" style="display: inline-block" class="select-item">
              <option v-for="val in allArea" :selected="val['name'] === p">{{val['name']}}</option>
            </select>
            <select @change="cityChange($event)" style="display: inline-block" class="select-item"
                    v-if="allArea[p] !== undefined && allArea[p] !== null && allArea[p]['allAreaRespList'] !== undefined &&
              allArea[p]['allAreaRespList'] !== null && allArea[p]['allAreaRespList'].length > 0">
              <option :value="city.name" v-for="city in allArea[p]['allAreaRespList']" :selected="city.name === c">
                {{city.name}}
              </option>
            </select>
          </div>
        </div>
      </div>
      <div style="float: left;margin-left: 160px;">
        <div class="avatar">
          <img :src="userInfo.avatar" class="avatar"/>
        </div>
        <div class="modify-avatar modify-avatar-same" style="position: absolute;z-index: -1;">
        </div>
        <div class="modify-avatar-content modify-avatar-same" style="z-index: 1">
          修改头像
        </div>
      </div>
    </div>
    <div class="clearFix"/>
    <div>
      <div class="make-sure-btn" @click="saveModify">
        保存
      </div>
      <div class="cancel-btn">
        取消
      </div>
    </div>
  </div>
</template>

<script>

  import Input from "../components/common/input";

  export default {
    name: "modifyUserInfo",
    beforeCreate() {
      let info = this.$store.state.userInfo
      if (info === null) {
        this.$router.push('/login')
      }
      this.$axios({
        url: this.api.basicUserInfo,
        params: {},
        method: 'get'
      }).then(res => {
        if (res.state === 0) {
          this.userInfo = res.data
          let areas = res.data.areas
          this.areas = areas
          if (areas !== '') {
            this.p = areas.split(',')[0]
            this.c = areas.split(',')[1]
          }
        } else {
          this.$router.push('/')
        }
      })
      this.$axios({
        url: this.api.allArea,
        params: {},
        method: 'get'
      }).then(res => {
        if (res.state === 0) {
          this.allArea = res.data
          let areas = this.p
          if (areas === null || areas === undefined || areas === '') {
            this.p = Object.keys(res.data)[0]
          }
        }
      })
    },
    watch: {
      p(val) {
        let list = this.allArea[val]
        if (list === null || list === undefined || list['allAreaRespList'] === null || list['allAreaRespList'] === undefined) {
          this.c = ''
        } else {
          let city = this.allArea[val]['allAreaRespList'][0].name
          let p = this.areas.split(',')[0]
          let a = this.p
          if (p !== a) {
            this.c = city
          }
        }
      },
    },
    methods: {
      provinceChange(e) {
        this.p = e.target.value
      },
      cityChange(e) {
        this.c = e.target.value
      },
      inputChange(name, val) {
        this.postData[name] = val
      },
      saveModify() {
        let postData = this.postData
        let area
        if (this.c !== '') {
          area = this.p + "," + this.c
        } else {
          area = this.p
        }
        if (area !== this.areas) {
          postData['areas'] = area
        }
        if (Object.keys(postData).length === 0) {
          this.$router.push("/")
        } else {
          console.log(postData)
          this.$axios({
            url: this.api.modifyUserInfo,
            params: postData,
            method: 'post'
          }).then(res => {
            if (res.state === 0) {
              this.$axios({
                url: this.api.basicUserInfo,
                params: {},
                method: 'get'
              }).then(res => {
                if (res.state === 0) {
                  this.$store.commit('setUserInfo', res.data)
                }
              })
              this.$router.push("/")
            }
          })
        }
      },
    },
    data() {
      return {
        userInfo: {},
        inputType: {
          'width': '620px',
          'height': '42px',
          'background': `rgba(137, 201, 151, 1)`,
          'border': '1px solid rgba(27,27,27,1)',
          'border-radius': '6px',
          'font-size': '16px',
          'font-weight': '400',
          'color': `rgba(27, 27, 27, 1)`,
        },
        allArea: {},
        p: '',
        c: '',
        postData: {},
        areas: "",
      }
    },
    components: {Input},
  }
</script>

<style scoped>
  .content {
    margin-left: 300px;
    margin-top: 60px;
  }

  .split {
    margin-top: 18px;
    height: 1px;
    width: 100%;
    background: rgba(239, 137, 137, 1);
    border: 1px solid rgba(0, 0, 0, 1);
  }

  .editUserInfoTitle {
    width: 121px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(27, 27, 27, 1);
    text-align: left;
  }

  .userInfo {
    margin-top: 80px;
    text-align: left;
    margin-left: 10px;
  }

  .label {
    width: 80px;
    height: 44px;
    line-height: 44px;
    display: inline-block;
  }

  .inputClass {
    width: 620px;
    height: 43px;
    display: inline-block;
    background: rgba(137, 201, 151, 1);
    border: 1px solid rgba(27, 27, 27, 1);
    border-radius: 6px;
  }

  .content-each {
    margin-top: 46px;
  }


  .make-sure-btn {
    display: inline-block;
    width: 78px;
    height: 34px;
    line-height: 34px;
    background: rgba(12, 115, 194, 1);
    opacity: 0.85;
    border-radius: 6px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }

  .cancel-btn {
    margin-left: 141px;
    width: 78px;
    line-height: 34px;
    display: inline-block;
    height: 34px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(27, 27, 27, 1);
    border-radius: 6px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(27, 27, 27, 1);
  }

  .avatar {
    width: 146px;
    height: 146px;
    background: rgba(255, 255, 255, 1);
    border: 2px solid rgba(239, 137, 137, 1);
  }

  .modify-avatar {
    background: rgba(191, 191, 191, 1);
    border: 1px solid rgba(27, 27, 27, 1);
    opacity: 0.45;
    border-radius: 4px;
  }

  .modify-avatar-same {
    width: 88px;
    height: 22px;
    margin-top: 22px;
    margin-left: 29px;
  }

  .modify-avatar-content {
    line-height: 22px;
    text-align: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(27, 27, 27, 1);
  }

  .select-item {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(27, 27, 27, 1);
    border-radius: 2px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(27, 27, 27, 1);
  }
</style>
